$(function(){
    //如果想要保存搜索关键字，就需要知道localStorage中是否已经有关键字数据
    //先获取到localStorage中保存的keyword对应的数据
    var arr = localStorage.getItem("keyword");
    if(!arr){
        //如果arr为null，说明localStorage中没有对应的数据，我们就创建一个数组来保存关键字数据
        arr = [];
    }else{
        //读取出来的arr如果不为null，那么arr就是一个json格式的字符串，需要将json格式的字符串转换为对象或数组
        arr = JSON.parse(arr);
    }
    //根据arr数组生成搜索历史列表
    var html = template("list",{list:arr});
    $("#historySearch").html(html);

    //给搜索按钮添加点击事件
    $("#btnSearch").on("click",function(){
        //判断用户在文本框中输入了内容没有
        var value = $("#keyWord").val();
        if( value.trim() === "" ){
            //如果文本框为空，提示用户
            // alert("请输入搜索关键字");
            mui.alert("请输入搜索关键字");
            return;
        }else{
            //将用户输入的关键字添加到arr数组中
            //添加元素的时候应该先做一个判断，判断添加的元素是否在数组中已经存在
            if( arr.indexOf(value) >= 0 ){
                //如果存在，就删除掉老的元素，添加新的元素
                arr.splice( arr.indexOf(value) , 1 );
            }
            arr.push(value);
            //将新增了元素的arr数组重新写入到localStorage中
            localStorage.setItem("keyword", JSON.stringify(arr) );
            //在跳转之前将文本框的内容清空
            $("#keyWord").val("");
            //如果输入了内容，则将用户输入的内容作为关键字参数传递到search-result.html
            location.href = "search-result.html?keyWord="+value;
        }

    })

    //给清空历史按钮添加点击事件
    $(".mui-icon-trash").on("click",function(){
        //弹出mui选择提示信息框询问是否要删除历史记录
        mui.confirm("请问是否要删除搜索历史记录", "是否删除", ["是","否"], (e)=>{
            //通过回调函数的参数e的index属性可以获取用户点击了第几个按钮，0表示点击了第一个按钮
            if(e.index == 0){
                //用户点击了“是”，删除历史记录
                //删除localStorage中保存的数据
                localStorage.removeItem("keyword");
                //删除页面列表中的关键字列表数据
                $("#historySearch").html("");
                //删除内存中arr数组中保存的数据
                arr=[];
            }
        })
    })
})